<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            background-color: #ccc;
        }
    </style>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="key" @keyup.up="up" @keyup.down="down" @keyup.enter="enter">
        <ul>
            <li v-for="(item,index) in resList" :key='index' :class="indexList==index?'active':''">{{item}}</li>
        </ul>
    </div>
</body>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
               key:'',
               resList:[],
               indexList:-1
            },
            watch:{
                key(val){
                   let script=document.createElement('script')
                   script.src='http://suggestion.baidu.com/su?cb=callback&wd='+val
                   document.body.appendChild(script)
                }
            },
            
            methods:{
                up(){
                    this.indexList--
                    if (this.indexList<0) {
                        this.indexList=4
                    }
                },
                down(){
                    this.indexList++
                    if (this.indexList>4) {
                        this.indexList=0
                    }
                },
                enter(){
                    console.log(this.resList[this.indexList]);
                    window.open('http://www.baidu.com/s?wd='+this.resList[this.indexList]   )
                }
            }   
        })
        function callback(res){
            let arr=res.s.filter((item,index)=>{
                return index<5
            })
            vm.resList=arr
        }
    </script>
</html>